/** * @description: 心理预警 */
<template>
  <div class="pub-container">
    <!-- 心理异常类型 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="psyUnusual"
      :optionData="psyUnusualData"
      :colorList="psyUnusualColorList"
      :lengendPlace="psyUnusualLengendPlace"
      pieTitleText="总预警人数"
      titleText="心理异常类型"
    />

    <!-- 各学院分布 -->
    <div class="floor">
      <div class="title">各学院分布</div>
      <CollegeWarning :collegeWarningList="collegeWarningList" type="psy" />
    </div>
  </div>
</template>

<script>
import { warningPsychic } from '@/api/warning'
import PieEchart from '@/components/pieEchart'
import CollegeWarning from './components/collegeWarning'
export default {
  name: 'PsyWarning',
  components: { PieEchart, CollegeWarning },
  data() {
    return {
      isApiComp: false,
      //心理预警
      psychicObj: {},
      psyUnusualData: [],
      psyUnusualLengendPlace: { top: '10%', left: '62%' },
      psyUnusualColorList: ['#FF7357', '#FFA132', '#FFE032', '#24E3FF', '#21A6FB', '#2E6CF6'],

      collegeWarningList: [], //各学院分布

      params: {
        //筛选条件
        startDate: undefined,
        endDate: undefined,
      },
    }
  },
  created() {
    this.getWarningPsychic()

    //筛选触发
    this.$bus.on('warningStuDbs', (startDate, endDate) => {
      this.params.startDate = startDate
      this.params.endDate = endDate

      this.psychicObj = {}
      this.psyUnusualData = []
      this.collegeWarningList = []

      this.getWarningPsychic()
    })
  },

  methods: {
    //行为失范预警
    async getWarningPsychic() {
      try {
        const { data } = await warningPsychic({ ...this.params })
        this.psychicObj = data.data

        //心理异常类型
        let psyUnusualData = []
        if (this.psychicObj.warnTypeList) {
          this.psychicObj.warnTypeList.forEach(item => {
            psyUnusualData.push({
              name: item.type,
              value: item.warnStuNums,
            })
          })
        }

        this.psyUnusualData = psyUnusualData || []

        //各学院分布
        this.collegeWarningList = this.psychicObj.collegeWarningList
        this.isApiComp = true
      } catch (e) {
        console.log(e)
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.floor {
  background: $bg-white;
  padding: 20px 12px;
  border-radius: 10px;
  margin-top: 12px;
  .title {
    font-size: $fz16;
    color: $color-title;
    font-weight: normal;
    margin-bottom: 15px;
  }
}
</style>
